<script>
import { Icon, ActionSheet } from 'vant'

export default {
  components: {
    [Icon.name]: Icon,
    [ActionSheet.name]: ActionSheet
  },
  inheritAttrs: false,
  props: {
    options: {
      type: Array,
      required: true
    },
    value: {
      type: [String, Number],
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: false
    }
  },
  computed: {
    className() {
      return ['g-select', this.disabled && 'g-select--disabled']
    },
    selected() {
      return (this.options.find(option => option.value === this.value) || { name: '' })
    }
  },
  methods: {
    toggle(show) {
      this.show = show
    },
    onSelect(item) {
      this.$emit('input', item.value)
      this.$emit('change', this.options.findIndex(option => option.value === item.value))
    }
  }
}
</script>

<template>
  <div class="g-select-wrap">
    <div
      :class="className"
      @click="toggle(true)"
    >
      <span class="g-select__text">{{ selected.name }}</span>
      <van-icon class="arrow-down" name="arrow-down" />
    </div>
    <van-action-sheet
      v-model="show"
      v-bind="$attrs"
      :actions="options"
      close-on-click-action
      cancel-text="取消"
      @select="onSelect"
    />
  </div>

</template>

<style lang="less">
.g-select {
  position: relative;
  font-size: 40px;
  width: 140px;
  border: 4px solid #666666;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding-left: 8px;
  overflow: hidden;

  &--disabled {
    pointer-events: none;
    filter: grayscale(1);
  }

  &__text {
    line-height: 48px;
    flex: 1;
  }

  &-wrap {
    .van-action-sheet__name, .van-action-sheet__cancel {
      font-size: 40px;
    }
    .van-action-sheet__item + .van-action-sheet__item {
      box-shadow: inset 0 2px 0 0 #eeeeee;
      border-radius: 0;
    }
  }

  .arrow-down {
    height: 100%;
    line-height: 48px;
    padding: 0 4px;
    background-color: #07c160;
    color: #ffffff;
    font-weight: bold;
  }
}
</style>
